package com.zhihaoliang.map.home

import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.viewmodel.compose.viewModel
import com.zhihaoliang.map.base.CraneDrawer
import com.zhihaoliang.map.base.CraneTabBar
import com.zhihaoliang.map.base.CraneTabs
import com.zhihaoliang.map.base.ExploreSection
import com.zhihaoliang.map.data.ExploreModel
import com.zhihaoliang.map.ui.theme.CraneTheme
import kotlinx.coroutines.launch
import java.util.*

/**
 * @author 支豪亮
 * @date 2023/1/12 11:12
 */

/**
 *  创建 方法的别名
 */
typealias OnExploreItemClicked = (ExploreModel) -> Unit

/**
 * Tab 的添加栏
 */
enum class CraneScreen {
    Fly, Sleep, Eat
}


/**
 *  页面的总体架构
 *
 *  @param onExploreItemClicked 点击进入详情页面
 */
@Composable
fun CraneHome(onExploreItemClicked: OnExploreItemClicked) {
    val scaffoldState = rememberScaffoldState() // 记录抽屉的状态

    Scaffold(scaffoldState = scaffoldState, drawerContent = {
        CraneDrawer()
    }) {
        val scope = rememberCoroutineScope()
        CraneHomeContent(modifier = Modifier.padding(it),
                         onExploreItemClicked = onExploreItemClicked,
                         openDrawer = {
                             scope.launch {
                                 scaffoldState.drawerState.open()
                             }
                         })
    }
}

/***
 * 页面的内容
 *
 * @param onExploreItemClicked 点击进入详情页面
 * @param openDrawer 点击打开抽屉
 * @param modifier 页面的装饰
 */
@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun CraneHomeContent(
    onExploreItemClicked: OnExploreItemClicked,
    openDrawer: () -> Unit,
    modifier: Modifier = Modifier
) {
    val viewModel: MainViewModel = viewModel() // 创建 MainViewModel
    val suggestedDestinations: List<ExploreModel> by viewModel.suggestedDestinations.collectAsState()
    val onPeopleChanged: (Int) -> Unit = { viewModel.updatePeople(it) } //过滤数据列表
    var tabSelected by remember { mutableStateOf(CraneScreen.Fly) } //当前 选中的Tab

    BackdropScaffold(
        modifier = modifier,
        scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed), //BackdropValue.Revealed -展示状态，BackdropValue.Concealed-隐藏默认状态
        frontLayerScrimColor = Color.Unspecified, appBar = {
            HomeTabBar(openDrawer = openDrawer,
                       tabSelected = tabSelected,
                       onTabSelected = { tabSelected = it })

        },
        backLayerContent = { SearchHeader(tabSelected, viewModel, onPeopleChanged) },
        frontLayerContent = {
            SearchBody(onExploreItemClicked, suggestedDestinations, tabSelected, viewModel)
        })
}

/**
 * 页面的TabBar
 * @param openDrawer 点击打开抽屉
 * @param tabSelected 当前选中的Tab
 * @param onTabSelected 点击Tab的操作
 */
@Composable
private fun HomeTabBar(
    openDrawer: () -> Unit,
    tabSelected: CraneScreen,
    onTabSelected: (CraneScreen) -> Unit,
) {
    CraneTabBar(onMenuClicked = openDrawer) { tabBarModifier ->
        CraneTabs(modifier = tabBarModifier,
                  titles = CraneScreen.values().map { it.name },
                  tabSelected = tabSelected,
                  onTabSelected = { newTab -> onTabSelected(CraneScreen.values()[newTab.ordinal]) }) // newTab.ordinal 枚举的序列
    }
}

@Composable
private fun SearchBody(
    onExploreItemClicked: OnExploreItemClicked,
    list: List<ExploreModel>,
    tabSelected: CraneScreen,
    viewModel: MainViewModel = viewModel()
) {
    when (tabSelected) {
        CraneScreen.Fly -> {
            ExploreSection(
                title = "Explore Flights by Destination",
                exploreList = list,
                onItemClicked = onExploreItemClicked
            )
        }
        CraneScreen.Sleep -> {
            ExploreSection(
                title = "Explore Properties by Destination",
                exploreList = viewModel.hotels,
                onItemClicked = onExploreItemClicked
            )
        }
        CraneScreen.Eat -> {
            ExploreSection(
                title = "Explore Restaurants by Destination",
                exploreList = viewModel.restaurants,
                onItemClicked = onExploreItemClicked
            )
        }
    }

}

/**
 * 底部一层，用设置搜索条件
 * @param tabSelected  当前选中的Tab
 * @param viewModel MainActivity 的 ViewModle
 * @param onPeopleChanged 同行人数变化的回调
 */
@Composable
private fun SearchHeader(tabSelected: CraneScreen, viewModel: MainViewModel, onPeopleChanged: (Int) -> Unit) {
    when (tabSelected) {
        CraneScreen.Fly -> FlySearchContent(
            onPeopleChanged = onPeopleChanged,
            onToDestinationChanged = {
                viewModel.toDestinationChanged(it)
            })
        CraneScreen.Sleep -> SleepSearchContent(
            onPeopleChanged = onPeopleChanged
        )
        CraneScreen.Eat -> EatSearchContent(
            onPeopleChanged = onPeopleChanged
        )
    }
}


@Composable
@Preview
private fun CraneHomePreview() {
    CraneTheme {
        CraneHome(onExploreItemClicked = {})
    }

}






